<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../../js/class/vue.min.js"></script>
	</head>
	<body>
		<style type="text/css">
			* {margin: 0;padding: 0;}
			.ZYBHeader {
				width: 100%;
				height: 102px;
				box-sizing: border-box;
				border: 1px solid black;
			}
			.zeroContainer,.businessBGI,.busListFirst {
				width: 1280px;
				height: 922px;
				position: absolute;
			}
			.bgd1,.bgd2,.bgd3,.bgd4 {
				position: absolute;
			}
			.bgd1 {
				width: 666px;
				height: 461px;
				top: 0;
				left: 0;
			}
			.bgd2 {
				width: 480px;
				height: 461px;
				bottom: 0;
				left: 0;
			}
			.bgd3 {
				width: 477px;
				height: 461px;
				top: 0;
				right: 0;
			}
			.bgd4 {
				width: 663px;
				height: 461px;
				bottom: 0;
				right: 0;
			}
			.bgd5 {
				width: 696px;
				height: 920px;
				margin: 0 auto;
			}
			.bgdClick5 {
				position: absolute;
				top: 0;
				width: 324px;
				height: 922px;
				/* border: 1px solid black; */
				transform: skewX(-22deg);
				transform-origin: bottom left;
				z-index: 2;
				background-color: black;
				opacity: 0.5;
			}
			.bgdClick1,.bgdClick2,.bgdClick3,.bgdClick4 {
				/* position: absolute; */
				top: 0;
				width: 100%;
				height: 100%;
				background-color: black;
				opacity: 0.5;
			}
			.zeroBgI {
				position: absolute;
			}
			.busBox {
				position: absolute;
			}
		</style>
		
		<header>
			<div class="ZYBHeader"></div>
		</header>
		
		
		<div id="zeroContainer" class="zeroContainer">
			
			
			<div class="businessBGI">
				<div class="bgd1" @click="bgdClick($event)">
					<img class="zeroBgI" src="../../img/ZYBIMG/查询及转账底图.png" />
					<div class="bgdClick1">
						<div class="busBox">
							<div>
								<img src="../../img/ZYBIMG/查询及转账.png" />
							</div>
						</div>
					</div>
				</div>
				<div class="bgd2" @click="bgdClick($event)">
					<img class="zeroBgI" src="../../img/ZYBIMG/个人业务%20底图.png" />
					<div class="bgdClick2"></div>
				</div>
				<div class="bgd3" @click="bgdClick($event)">
					<img class="zeroBgI" src="../../img/ZYBIMG/账户服务%20底图.png" />
					<div class="bgdClick3"></div>
				</div>
				<div class="bgd4" @click="bgdClick($event)">
					<img class="zeroBgI" src="../../img/ZYBIMG/生活缴费%20底图.png" />
					<div class="bgdClick4"></div>
				</div>
				<div class="bgd5" @click="bgdClick($event)">
					<img class="zeroBgI" src="../../img/ZYBIMG/理财及存款产品%20底图.png"/>
					<div class="bgdClick5"></div>
				</div>
			</div>
			
			
		</div>
		<footer>
			<div></div>
		</footer>
		
		<script type="text/javascript">
			"use strict"
			//检测当前
			
			var busFirstList = {
				"businessArr":[{
					"name":"查询及转账",
					"ids":"",
					"enable":"1",
					"iconUrl":"",
					"existed":"",
					"layout":"",
					"tag":"OnWithdrawal"
				}]
			}
			var vm = new Vue({
				el:"#zeroContainer",
				data:{
					
				},
				methods:{
					bgdClick: function(e){
						var _this = e.target;
						console.log(e);
						console.log(e.target);
					},
				},
			})
			
		</script>
	</body>
</html>